<template>
  <div class="app-container">
    <el-row>
      <el-col :span="6"
              class="card-box">
        <el-card>
          <div slot="header"><span>工单质检</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0"
                   style="width: 100%;"
                   :model="form">
              <thead>
                <tr>
                  <th class="el-table__cell is-leaf">
                    <div class="cell">质检项</div>
                  </th>
                  <th class="el-table__cell is-leaf">
                    <div class="cell">得分</div>
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr style="height:80px;">
                  <td class="el-table__cell is-leaf">
                    <div class="cell">语言</div>
                  </td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell">
                      <el-input style="width:80px;"
                                v-model="form.languageCore"></el-input>
                    </div>
                  </td>
                </tr>
                <tr style="height:80px;">
                  <td class="el-table__cell is-leaf">
                    <div class="cell">及时性</div>
                  </td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell">
                      <el-input style="width:80px;"
                                v-model="form.timelyCore"></el-input>
                    </div>
                  </td>
                </tr>
                <tr style="height:80px;">
                  <td class="el-table__cell is-leaf">
                    <div class="cell">解答态度</div>
                  </td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell">
                      <el-input style="width:80px;"
                                v-model="form.attitudeCore"></el-input>
                    </div>
                  </td>
                </tr>
                <tr style="height:80px;">
                  <td class="el-table__cell is-leaf">
                    <div class="cell">质检评鉴</div>
                  </td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell">
                      <el-input style="width:150px;"
                                v-model="form.remark"></el-input>
                    </div>
                  </td>
                </tr>
                <tr style="height:80px;">
                  <td class="el-table__cell is-leaf">
                    <div class="cell">
                      
                      <router-link :to="{path:'/work/qualitied-index'}">
                          <el-button type="primary"
                                 @click="submitForm">确 定</el-button>
                      </router-link>
                    </div>
                  </td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell">总分：{{totalCore}}
                    </div>
                  </td>
                </tr>

              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="18"
              class="card-box">
        <el-card>
          <div slot="header"><span>| 工单 > 工单质检</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0"
                   style="width: 100%;"
                   :model="order">
              <thead>
                <tr>
                  <th class="el-table__cell is-leaf">
                    <div class="cell">工单详细信息</div>
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr style="height:80px;">
                  <td class="el-table__cell is-leaf">
                    <div class="cell">工单编号：</div>
                  </td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell">{{order.orderNo}}</div>
                  </td>

                </tr>
                <tr style="height:80px;">
                  <td class="el-table__cell is-leaf">
                    <div class="cell">工单类别：</div>
                  </td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell">{{order.roType}}</div>
                  </td>

                </tr>
                <tr style="height:80px;">
                  <td class="el-table__cell is-leaf">
                    <div class="cell">问题描述：</div>
                  </td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell">{{order.roDescription}}</div>
                  </td>

                </tr>
                <tr style="height:80px;">
                  <td class="el-table__cell is-leaf">
                    <div class="cell">工单状态</div>
                  </td>
                  <td class="el-table__cell is-leaf">
                    <!-- 字典解释 -->
                    <div class="cell">
                      {{orderStatusFormat(order)}}
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

    </el-row>
  </div>
</template>

<script>
// import { getServer } from "@/api/monitor/server";
import { selectRepairById } from '@/api/work/myorder'
import { qualitiedOrder } from '@/api/work/qualitied'
export default {
  dicts: ['rp_repair_order_status'],
  name: 'Qualitied',
  data() {
    return {
      // 服务器信息
      // server: []
      //表单数据
      form: {},
      //工单id
      id: '',
      //工单的信息
      order: {},
      //总分
      totalCore: '',
    }
  },
  //组件切换钩子函数
  activated: function () {
    this.openLoading()
    this.getRepair()
    this.$modal.closeLoading()
    this.form = {}
    this.totalCore = ''
  },
  created() {
    // console.log('liyou')
    // console.log('this.$route.query', this.$route.query.ab)
    // console.log('this.$route.query', this.$route.query.id)

    this.openLoading()
    this.getRepair()
    this.$modal.closeLoading()
  },
  methods: {
    //字典翻译
    orderStatusFormat(row) {
      return this.selectDictLabel(
        this.dict.type.rp_repair_order_status,
        row.roStatus
      )
    },
    //通过路由过来的工单id获取工单信息
    getRepair() {
      selectRepairById(this.$route.query.id).then((res) => {
        this.form.repairId = this.$route.query.id
        this.form.userId = res.data.userid
        this.order = res.data
        console.log(res.data)
      })
    },
    //提交质检
    submitForm() {
      //质检的分数信息
      console.log(this.form)
      this.totalCore =
        parseInt(this.form.attitudeCore) +
        parseInt(this.form.languageCore) +
        parseInt(this.form.timelyCore)
      qualitiedOrder(this.form).then((res) => {
        this.$modal.msgSuccess(res.msg)
      })
    },
    // 打开加载层
    openLoading() {
      this.$modal.loading('正在加载服务监控数据，请稍候！')
    },
  },
}
</script>
